<script setup>
import { onMounted } from 'vue'
// import { useUserStore } from '@/store/user';
import { CountTo } from 'vue3-count-to';
import * as echarts from 'echarts';
import request from '@/utils/request';

// const userStore = useUserStore();
// console.log(userStore.username);
// console.log(userStore.isLogin);


const initEchart01 = async () => {
    const response = await request.get("/detail/all");
    // console.log(response);
    const list1 = response.reduce((acc, { year }) => {
        if (!acc[year]) {
            acc[year] = { year, cnt: 0 }
        }
        acc[year].cnt += 1
        return acc;
    }, {})
    // console.log(list1);
    const obj1 = Object.values(list1).sort((a, b) => a.year - b.year).slice(0, 3);
    // console.log(obj1);
    const year = obj1.map(x => x.year)
    // console.log(year);
    const cnt_year = obj1.map(x => x.cnt)
    // console.log(year);
    // console.log(cnt_year);

    let myChart01 = echarts.init(document.getElementById('c1'));
    myChart01.setOption(
        {
            title: {
                text: "近三年专业招生情况"
            },
            grid: [{
                left: '10%',
                bottom: '5%',
                top: '30%',
                // right: '10%'
            }],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            emphasis: {
                itemStyle: {
                    borderRadius: 20,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#2378f7" },
                        { offset: 0.7, color: "#2378f7" },
                        { offset: 1, color: "#83bff6" },
                    ]),
                },
            },
            xAxis: {
                data: year,
                type: 'category',
                name: '入学时间'
            },
            yAxis: {
                type: 'value',
                name: '人数'
            },
            series: [
                {
                    name: '人数',
                    type: "bar",
                    data: cnt_year,
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                }]
        });
}

const initEchart02 = async () => {
    var response = await request.get("/detail/all");
    var list = response.reduce((acc, { sex }) => {
        if (!acc[sex]) {
            acc[sex] = { sex, cnt: 0 }
        }
        acc[sex].cnt += 1
        return acc;
    }, {})
    var obj = Object.values(list);
    var data = obj.map(({ sex, cnt }) => ({ name: sex, value: cnt }))

    let myChart02 = echarts.init(document.getElementById('c2'));
    myChart02.setOption({
        title: {
            text: '专业男女比例',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
            //  专业男女比例
            //  男：95 (43.98%)
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '专业男女比例',
                type: 'pie',
                radius: '75%',
                data: data,
                center: ['50%', '60%'],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    color: function (params) {
                        var colorList = ["SkyBlue ", "LightPink"]
                        return colorList[params.dataIndex];
                    }
                }
            }
        ]
    });
}
onMounted(() => {
    initEchart01();
    initEchart02();
})
</script>

<template>
    <div style="min-height: 91vh;">
        <div class="wrapper">
            <div class="header">
                <!-- 卡片标签 -->
                <el-card class="box-card" style="min-height: 18px" align="middle" onclick="">
                    <div class="el-card-body">
                        <span class="number" ref="count">
                            <count-to :startVal="0" :endVal="216" :duration="3800"></count-to>
                        </span>
                    </div>
                    <template #header>
                        <div>
                            <span class="head-title">专业累计学生数（人）</span>
                        </div>
                    </template>
                </el-card>
                <!-- 卡片标签 -->
                <el-card class="box-card" align="middle" onclick="">
                    <div class="el-card-body">
                        <span class="number">
                            <count-to :startVal="0" :endVal="10" :duration="3000"></count-to>
                        </span>
                    </div>
                    <template #header>
                        <div>
                            <span class="head-title">专业开设课程数（门）</span>
                        </div>
                    </template>
                </el-card>
                <!-- 卡片标签 -->
                <el-card class="box-card" align="middle" onclick="">
                    <div class="el-card-body">
                        <span class="number">
                            <count-to :startVal="0" :endVal="10" :duration="3000"></count-to>
                        </span>
                    </div>
                    <template #header>
                        <div>
                            <span class="head-title">专业教职人员数（人）</span>
                        </div>
                    </template>
                </el-card>
                <!-- 卡片标签 -->
                <el-card class="box-card" align="middle" onclick="">
                    <div class="el-card-body">
                        <span class="number">
                            <count-to :startVal="0" :endVal="3" :duration="3000"></count-to>
                        </span>
                    </div>
                    <template #header>
                        <div>
                            <span class="head-title">专业开设时长（年）</span>
                        </div>
                    </template>
                </el-card>
            </div>

            <div class="main">
                <el-card class="chart-left">
                    <div style=" width: 100%;height: 50vh;" id="c1"></div>
                </el-card>

                <el-card class="chart-right">
                    <div style="width: 100%; height: 50vh;" id="c2"></div>
                </el-card>
            </div>

        </div>
    </div>
</template>

<style lang='scss' scoped>
.wrapper {
    padding-top: 12px;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: auto;
    box-sizing: border-box;

    .header {
        display: flex;
        flex-direction: row;
        height: 27vh;
        margin-left: 10%;
        margin-top: 2%;

        .box-card {
            min-width: 80px;
            width: 18%;
            height: 90%;
            margin-right: 2%;
            margin-left: 2%;
            transition: all 0.4s;

            .number {
                color: rgb(12, 154, 154);
                font-size: 55px;
                font-family: 'Courier New', Courier, monospace;
            }

            .el-card-body {
                padding-top: 10%;
            }
        }

        .box-card:hover {
            margin-top: -5px;
        }
    }

    .main {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        height: 59vh;
        padding: 1% 0px;
        margin: auto;

        .chart-left {
            height: 100%;
            width: 47%;
            margin: 0px 20px;
            box-shadow: 2px 0 6px rgba(154, 158, 163, 0.35);
            border-radius: 10px;
        }

        .chart-left:hover {
            margin-top: -5px;
        }

        .chart-right {
            height: 100%;
            width: 49%;
            box-shadow: 2px 1px 6px rgba(154, 158, 163, 0.35);
            border-radius: 10px;
        }

        .chart-right:hover {
            margin-top: -5px;
        }
    }
}
</style>